<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="售后服务" @clickLeft="leftBack" background-color="#318cff" color="#fff">
			<view slot="other" class="order-tabs dfj-flex dfj-flex-ai-c dfj-t-c dfj-bg-white">
				<view v-for="(item,index) in tabs" @click="orderTab(item.id)" class="dfj-flex-1 dfj-pd-tb-20" :class="tabs_index == item.id?'dfj-bd-b-base dfj-bd-w-4':''">{{ item.name }}</view>
			</view>
		</uni-nav-bar>
		
		<view class="dfj-pd-lr-20 dfj-pd-t-50 dfj-mg-t-50">
			<block v-for="(item,index) in list">
				<block v-if="item.progress == 0">
					<view class="dfj-bg-white dfj-pd-20 dfj-mg-b-20 dfj-bd-radius-10">
						<view class="dfj-flex dfj-flex-ai-c">
							<view>
								<image :src="item.productIconUrl" style="width: 150rpx;height: 150rpx;"></image>
							</view>
							<view class="dfj-flex-1 dfj-t-333 dfj-mg-l-20">
								<view>{{ item.productName }}</view>
								<view>数量：{{ item.amount || 1 }}</view>
								<view class="dfj-t-danger dfj-mg-t-10">￥{{ item.price }}</view>
							</view>
						</view>
						<view class="dfj-bg-e5e dfj-t-333 dfj-pd-20">
							<text class="dfj-t-base">换货：审核中</text> 平台在处理
						</view>
						<view class="dfj-t-r dfj-pd-tb-20">
							<navigator :url="`/pages/my/sales-details?orderId=${item.orderId}`" class="dfj-inline-block dfj-pd-lr-30 dfj-pd-tb-20 dfj-t-base dfj-bd-base dfj-bd-radius-50">查看详情</navigator>
						</view>
					</view>
				</block>
				<block v-else-if="item.progress == 1">
					<view class="dfj-bg-white dfj-pd-20 dfj-mg-b-20 dfj-bd-radius-10">
						<view class="dfj-flex dfj-flex-ai-c">
							<view>
								<image :src="item.productIconUrl" style="width: 150rpx;height: 150rpx;"></image>
							</view>
							<view class="dfj-flex-1 dfj-t-333">
								<view>{ item.productName }}</view>
								<view>数量：{{ item.amount || 1 }}</view>
								<view class="dfj-t-danger dfj-mg-t-10">￥{{ item.price }}</view>
							</view>
						</view>
						<view class="dfj-bg-e5e dfj-t-333 dfj-pd-20">
							<text class="dfj-t-base">换货：审核成功</text>
						</view>
						<view class="dfj-t-r dfj-pd-tb-20">
							<navigator :url="`/pages/my/sales-details?orderId=${item.orderId}`" class="dfj-inline-block dfj-pd-lr-30 dfj-pd-tb-20 dfj-t-base dfj-bd-base dfj-bd-radius-50">查看详情</navigator>
						</view>
					</view>
				</block>
				<block v-else-if="item.progress == 2">
					<view class="dfj-bg-white dfj-pd-20 dfj-mg-b-20 dfj-bd-radius-10">
						<view class="dfj-flex dfj-flex-ai-c">
							<view>
								<image :src="item.productIconUrl" style="width: 150rpx;height: 150rpx;"></image>
							</view>
							<view class="dfj-flex-1 dfj-t-333">
								<view>{{ item.productName }}</view>
								<view>数量：{{ item.amount || 1 }}</view>
								<view class="dfj-t-danger dfj-mg-t-10">￥{{ item.price }}</view>
							</view>
						</view>
						<view class="dfj-bg-e5e dfj-t-333 dfj-pd-20">
							<text class="dfj-t-danger">换货：已关闭</text> 平台拒绝了您的售后申请
						</view>
						<view class="dfj-t-r dfj-pd-tb-20">
							<navigator :url="`/pages/my/sales-details?orderId=${item.orderId}`" class="dfj-inline-block dfj-pd-lr-30 dfj-pd-tb-20 dfj-t-base dfj-bd-base dfj-bd-radius-50">查看详情</navigator>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="dfj-bg-white dfj-pd-20 dfj-mg-b-20 dfj-bd-radius-10">
						<view class="dfj-flex dfj-flex-ai-c">
							<view>
								<image :src="item.iconUrl" style="width: 150rpx;height: 150rpx;"></image>
							</view>
							<view class="dfj-flex-1 dfj-t-333 dfj-mg-l-20">
								<view>{{ item.productTitle }}</view>
								<view>数量：{{ item.amount }}</view>
								<view class="dfj-t-danger dfj-mg-t-10">￥{{ item.price }}</view>
							</view>
						</view>
						<view class="dfj-t-r">
							<text @click="toSalesSh(item)" class="dfj-inline-block dfj-pd-lr-30 dfj-pd-tb-20 dfj-t-base dfj-bd-base dfj-bd-radius-50">申请售后</text>
						</view> 
					</view>
				</block>
			</block>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{name: '申请售后',id: -1},
					{name: '处理中',id: 0},
					{name: '申请记录',id: 3},
				],
				tabs_index: -1,
				page: 1,
				list: []
			}
		},
		onShow() {
			this.getList();
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			orderTab(i) {
				this.tabs_index = i
				if(this.tabs_index == -1){
					this.page = 1;
					this.list = []
					this.getList()
				}else{
					this.page = 1;
					this.list = []
					this.get_Slist()
				}
			},
			getList(){
				this.$http({
					url: '/order/getSalesAfterProductList',
					data: {
						progress: this.tabs_index,
						page: this.page
					}
				}).then(res=> {
					if(res.data.list.length > 0){
						this.list.push(...res.data.list)
					}
				})
			},
			get_Slist(){
				this.$http({
					url: '/order/getAfterSalesList',
					data: {
						progress: this.tabs_index,
						page: this.page
					}
				}).then(res=> {
					if(res.data.list.length > 0){
						this.list.push(...res.data.list)
					}
				})
			},
			toSalesSh(item) {
				sessionStorage.setItem('salesItem', JSON.stringify(item));
				uni.navigateTo({
					url: '/pages/my/sales-after'
				})
			}
		}
	}
</script>

<style>
</style>
